<template>
    <div class="ui-layout" id="main">
    	<div class="ui-layout-header m-header">
    		<div class="ui-layout-header__item">
                <span>产品到期时间：{{ configure.expires }} </span>
                <Button type="primary" class="renew-btn">续费</Button>
            </div>
            <div class="ui-layout-header__item">
                <span>版本：{{ configure.version_name }}</span>
            </div>
            <div class="ui-layout-header__item" @mouseover="showUserPanel = true" @mouseout="showUserPanel = false">
                <span>{{ configure.site_name }}</span>
                <div class="m-site" v-show="showUserPanel">
                	<div class="m-site-header">
                		<a class="withdrawal" target="_blank" href="http://console.xiaozhe.cn/#/finance/withdraw?from=admin">立即提现</a>
                    	<span class="text">可提现金额</span>
                	</div>
                	<div class="m-site-balance">
                		<a>{{ configure.balance }}</a>RMB
                	</div>
                  	<ul class="m-site-menus">
                    	<li class="m-site-menus__item"><a href="https://www.xiaozhe.cn/" target="_blank">小折官网</a></li>
                    	<li class="m-site-menus__item"><a href="http://console.xiaozhe.cn/" target="_blank">小折控制台</a></li>
                    	<li class="m-site-menus__item"><a href="http://console.xiaozhe.cn/#/message/log?from=admin" target="_blank">短信发送记录</a></li>
                  	</ul>
                  	<ul class="m-site-menus">
                    	<li class="m-site-menus__item"><a href="javascript:void(0);" @click="handleLogout">安全退出账号</a></li>
                  	</ul>
                </div>
            </div>
    	</div>
    	<div class="ui-layout-sidebar">
    		<div class="ui-logo">
    			<!--<img v-if="configure.site_logo" :src="configure.site_logo" />
    			<img v-else src="../images/logo.png" />-->
    			<Icon custom="xz-icon xz-icon-logo" size="120" color="#1ba2fc" style="line-height: 51px;" />
    		</div>
    		<div class="ui-layout-sideslip-menu">
	    		<ul class="ui-menu">
	                <li class="ui-menu-item" v-for="(item, index) in menuList" :class="{'ui-menu-item-active': activeMenuName == item.name}" :key="item.name" :style="item.meta && item.meta.style ? item.meta.style : {}">
	                    <div class="ui-menu-item-box" @click.stop="handleRoutePath(item)">
	                        <Icon v-if="item.meta && item.meta.icon" :type="item.meta.icon"></Icon>
	                        <span class="layout-text">{{ item.meta && item.meta.title ? item.meta.title : '' }}</span>
	                    </div>
	                </li>
	            </ul>
           	</div>
    	</div>
    	<keep-alive :include="cachePage">
            <router-view></router-view>
       	</keep-alive>
    </div>
</template>

<script>
import Cookies from 'js-cookie';
export default {
    data () {
        return {
            showUserPanel: false,
            activeMenuName: 'home_index'
        }
    },
    computed: {
    	configure() {
			return this.$store.state.config.configure;
		},
    	user() {
    		return this.$store.state.user.user;
    	},
        menuList () {
            return this.$store.state.app.menuList;
        },
        cachePage () {
            return this.$store.state.app.cachePage;
        }
    },
   	watch: {
        '$route' (to) {
        	this.handleGetActiveName();
        }
    },
    mounted() {
    	this.init();
    	this.handleGetActiveName();
    },
    methods: {
    	init() {
    		// 系统设置
    		this.$store.dispatch('getSystemConfig');
    		// 获取系统常用的一些数据
    		this.$nextTick(() => {
    			// 获取地区数据
    			this.$store.dispatch('getAreaData');
    		})
    	},
    	handleGetActiveName() {
    		let firstRoute = this.$route.matched[0];
			if(firstRoute.meta && firstRoute.meta.active) {
				this.activeMenuName = firstRoute.meta.active;
			}else{
				this.activeMenuName = firstRoute.name;
			}
    	},
        handleRoutePath(child) {
            if(typeof child == 'string') {
            	this.$router.push({name: child})
            }else{
            	this.$router.push({name: child.name})
            }
        },
        // 退出
        handleLogout() {
        	this.$store.commit('logout');
        	this.$router.push({name: 'login'});
        }
    }
};
</script>
